<!--
 * @Description: 
 * @Autor: lin
 * @Date: 2023-04-03 10:37:44
 * @LastEditors: lin
 * @LastEditTime: 2023-04-06 09:53:45
-->
<template>
  <div class="scroll-list" ref="scrollList" @mouseenter="pause" @mouseleave="resume">
    <ul class="list" ref="list">
      <li class="flex-wrap concrete-li white mt12" v-for="(item, index) in autoListdata" :key="index">
        <!-- <span class="time mr30">8:28</span> -->
        <img class="li-img" :src="parseResourceUrl(item.headimgurl)" alt="" />
        <span class="mr30 nick-name">{{ item.nickname }}</span>
        <span>
          {{ +item.type === 1 ? '加入了计划' : '完成了今日计划' }}
        </span>
      </li>
      <li class="flex-wrap concrete-li white mt12" v-for="(item, index) in autoListdata" :key="'copy-' + index">
        <!-- <span class="time mr30">8:28</span> -->
        <img class="li-img" :src="parseResourceUrl(item.headimgurl)" alt="" />
        <span class="mr30 nick-name">{{ item.nickname }}</span>
        <span>
          {{ +item.type === 1 ? '加入了计划' : '完成了今日计划' }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    autoListdata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      scrollInterval: null,
      scrollSpeed: 40 // 滚动速度，数值越小滚动越快
    }
  },
  methods: {
    scroll() {
      const list = this.$refs.list
      const scrollList = this.$refs.scrollList
      if(!scrollList) {
        return
      }
      if (scrollList.scrollTop >= list.scrollHeight / 2) {
        scrollList.scrollTop = 0
      } else {
        scrollList.scrollTop++
      }
    },
    pause() {
      clearInterval(this.scrollInterval)
    },
    resume() {
      this.scrollInterval = setInterval(this.scroll, this.scrollSpeed)
    }
  },
  mounted() {
    this.scrollInterval = setInterval(this.scroll, this.scrollSpeed)
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval)
  }
}
</script>

<style scoped>
.scroll-list {
  position: relative;
  height: 240px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 12px 12px;
  overflow: hidden;
  padding: 4px 0px 16px 20px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .list-item {
  height: 32px;
  line-height: 32px;
} */
.concrete {
  height: 240px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 12px 12px;
  overflow: hidden;
  padding: 16px 0px 16px 20px;
  /* opacity: 0.4; */
}
.concrete-li {
  height: 32px;
  line-height: 32px;
}
.li-img {
  height: 32px;
  width: 32px;
  margin-right: 5px;
  border-radius: 50%;
}
.nick-name {
  display: inline-block;
  width: 49px;
}
.mt12 {
  margin-top: 12px;
}
.mr30 {
  margin-right: 30px;
}
</style>
